<template>
  <div class="container">
    <el-row>
      <el-form ref="searchform" :model="form" size="small">
        <el-col :span="3">
           <el-form-item prop="city_id">
                  <el-cascader
                    ref="cascader"
                    filterable
                    placeholder="请选择所在城市"
                    v-model="form.city_id"
                    :options="cityoptions"
                    :props="{
                      expandTrigger: 'hover',
                      checkStrictly: true,
                      emitPath: false,
                    }"
                    clearable
                     style="width: 95%"
                    :show-all-levels="false"
                  ></el-cascader>
                </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="lineId">
            <el-select
              v-model="form.lineId"
              placeholder="请选择线路"
              style="width: 95%"
              :disabled='!form.city_id'
            >
              <el-option
                v-for="item in prepareLineOption"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="start_date">
            <el-date-picker
              v-model="form.start_date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择开始日期"
               style="width: 95%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="start_time">
            <el-time-picker
             style="width: 95%"
             value-format="HH:mm:ss"
              v-model="form.start_time"
              placeholder="请选择开始时间"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="end_time">
            <el-time-picker
             style="width: 95%"
              v-model="form.end_time"
                  value-format="HH:mm:ss"
              placeholder="请选择结束时间"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <div class="rightbtn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchlist"
            class="marginL"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh-left" size="small" @click="resetform"
            >重置</el-button
          >
        </div>
      </el-form>
    </el-row>
    <el-row>
      <el-button type="primary" size="small" @click="addItem" v-if="checkPermission(['prepareTimetableCreate'])">添加</el-button>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        size="small"
      >
       <el-table-column
          prop="city_id"
          label="城市"
          show-overflow-tooltip
        ></el-table-column>
       <el-table-column
          prop="line_id.title"
          label="线路名称"
          show-overflow-tooltip
        ></el-table-column>
       <el-table-column
          prop="line_id"
          label="线路详情"
          width="400"
        >
        <template slot-scope="scope">
            <el-tooltip placement="top" popper-class="contentTips">
              <div slot="content">
                <span><span class="title">起始点：</span>{{ scope.row.line_id.startPoint.title }}<span v-if="scope.row.line_id.startPoint.isPhoto" class="el-icon-camera-solid marginLS"></span></span><br/>
                <span v-if="scope.row.line_id.morePoint.length>0"><span class="title">途经点：</span><span v-for="(p, i) in scope.row.line_id.morePoint"><span :class="i!=0?'marginL':''"  v-if="p">{{ p.title }}<span v-if="p.isPhoto" class="el-icon-camera-solid marginLS"></span><br/></span></span></span>
                <span><span class="title">目的地：</span>{{ scope.row.line_id.endPoint }}</span>
              </div>
              <div class="tips">
                <span  :style="{
                  color:scope.row.line_id.startPoint.isPhoto == 1 ? '#1bbc9b' : '',
                }">{{ scope.row.line_id.startPoint.title }}</span
              ><span class="el-icon-caret-right" style="margin: 0 10px"></span>
              <span v-for="(p, i) in scope.row.line_id.morePoint" v-if="scope.row.line_id.morePoint.length>0"
                ><span  v-if="i != 0"  :class="i != 0 ?'el-icon-caret-right':''"  style="margin: 0 10px"></span
                ><span v-if="p"
                  :style="{
                  color: p.isPhoto == 1 ? '#1bbc9b' : '',
                }"
                  >{{ p.title }}</span
                ></span
              ><span class="el-icon-caret-right" style="margin: 0 10px" v-if="scope.row.line_id.morePoint.length>0"></span>
              <span   :style="{
                  color: scope.row.line_id.endPoint.isPhoto == 1 ? '#1bbc9b' : '',
                }">{{ scope.row.line_id.endPoint.title }}</span
              >
              </div>
            </el-tooltip>
        </template>
        </el-table-column>

        <el-table-column
          prop="start_date"
          label="预约日期"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="start_time"
          label="开始时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="end_time"
          label="结束时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="num"
          label="名额"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="num_s"
          label="已选"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="state" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.state"
              @change="changestatus(scope.row)"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
              v-if="checkPermission(['prepareTimetableUpdateStatus'])"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editItem(scope.row)"  v-if="checkPermission(['prepareTimetableUpdate'])">编辑</el-button>
             <el-button type="text" @click="deleteTableItem(scope.row)" v-if="checkPermission(['prepareTimetableDelete'])">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20]"
            :page-size="10"
            background
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      :cityoptions="cityoptions"
      @confirm="confirm"
      @closedialog="closedialog"
      :dialogdata="dialogdata"
    ></subdialog>
  </div>
</template>

<script type="text/javascript">
import {
  prepareTimetable,
  timetableUpdatestatus,
  prepareLineOption,
  timetableRead,
  prepareTimetableDelete
} from "@/api/dataPreparation";
import subdialog from "./components/dialog";
  import checkPermission from '@/utils/permission' // 权限判断函数
     import { commonGetCity } from "@/api/examplace";
export default {
  data() {
    return {
      isshowDialog: false,
      dialogTitle: "新增",
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        state: null,
        city_id:''
      },
      tableData: [],
      category: [],
      cityoptions: [],
      pagination: {},
      prepareLineOption: {},
      dialogdata: null,
    };
  },
  components: {
    subdialog,
  },
  created() {
    this.getData();
    this.getprepareLineOption(this.form.city_id);
    this.getcommonGetCity();
  },
  methods: {
    checkPermission,
    //切换类型
    async changestatus(val) {
      let state = val.state == 0 ? 1 : 0;
      let params = {
        id: val.id,
        state: state,
      };
      let data = await timetableUpdatestatus(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
       //城市下拉
    async getcommonGetCity() {
      let data = await commonGetCity();
      this.cityoptions = data.data;
    },
    
    searchlist() {
       this.page= 1,
      this.getData();
    },
    resetform() {
      this.$refs["searchform"].resetFields();
      this.getData();
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    //详情
    async getquestionRead(id) {
      let data = await timetableRead({ id: id });
      this.dialogdata = data.data;
    },
    //获取下拉
    async getprepareLineOption(val) {
      let params
      if(val){
         params={ city_id: val }
      }
      let data = await prepareLineOption(params);
      this.prepareLineOption = data.data;
    },
       //删除
    async deleteTableItem(val) {
      let data = await prepareTimetableDelete({ id: val.id });
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message:data.msg,
        });
        this.getData();
      }
    },
    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //编辑
    editItem(val) {
   
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
         this.getquestionRead(val.id);
    },

    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.city_id) {
        params.city_id = this.form.city_id;
      }
      if (this.form.lineId) {
        params.lineId = this.form.lineId;
      }
      if (this.form.start_date) {
        params.start_date = this.form.start_date;
      }
      if (this.form.start_time) {
        params.start_time = this.form.start_time;
      }
      if (this.form.end_time) {
        params.end_time = this.form.end_time;
      }
      console.log(params)
      let data = await prepareTimetable(params);
      console.log(data);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  watch:{
    'form.city_id':function(val){
    
            this.getprepareLineOption(val);
    }
  },
  mounted() {},
};
</script>
<style lang="scss">

  .contentTips{
    line-height: 2.2;
    .title{display: inline-block;width: 50px ; }
    .marginL{
      margin-left: 50px;
    }
       .marginLS{
      margin-left: 10px;
    }
  }
</style>
<style lang="scss" scoped>
::v-deep{
  .tips{
    overflow: hidden;text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 -webkit-text-overflow:ellipsis;
 -moz-text-overflow:ellipsis;
 white-space:nowrap;
  }
      .marginLS{
      margin-left: 10px;
    }
}
</style>
